<template>
    <div>
        <n-form
            ref="formRef"
            inline
            :label-width="80"
            :model="newpeople"
          
            class="form"
        >
        <!-- v-model:value=""  -->
            <n-form-item label="姓名" path="name">
            <n-input placeholder="输入姓名" v-model:value="newpeople.name" />
            </n-form-item>
            <n-form-item label="年龄" path="age">
            <n-input  placeholder="输入年龄" v-model:value="newpeople.age"/>
            </n-form-item>
            <n-form-item label="地址" path="dizhi">
            <n-input  placeholder="输入地址" v-model:value="newpeople.dizhi"/>
            </n-form-item>
            <n-form-item>
            <n-button attr-type="button" @click="handleValidateClick">
                提交
            </n-button>
         </n-form-item>
  </n-form>

    </div>
</template>

<script setup>
import {  ref } from "vue";
import { useCounterStore } from '@/stores/counter.js'

let store = useCounterStore().count
console.log(store)

 let newpeople=ref({
   
    name:'',
    age:'',
    dizhi:''
 })
 console.log(newpeople)
   
 

      function  handleValidateClick(e) {
        e.preventDefault();
        if(newpeople.value.name!=''&newpeople.value.age!=''&newpeople.value.dizhi!=''){
            store.push(newpeople.value)

        }else{
            console.log('erorr')
        }
      }
</script>

<style scoped>
.form{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
</style>